<template>
  <div class="articles-root" flex="dir:top cross:center main:left">
    <div v-for="art of articles"
         :key="art.articleId"
         class="web-article"
         @click="toView(art.articleId)"
         flex="dir:left cross:top main:justify"
    >
      <div class="article-info" flex="dir:top cross:center mian:justify">
        <div class="article-title" flex="dir:top cross:left mian:between">
          <div class="article-title-name">{{art.name}}</div>
          <div class="article-title-statis" flex="dir:left cross:center main:justify">
            <span>字数:{{art.words}}</span>
            <span>点击:{{art.hits}}</span>
            <span>阅读:{{art.pViews}}</span>
            <span>{{art.updTime}}</span>
          </div>
        </div>
      </div>
      <div class="article-right" flex="dir:top cross:center main:left">
        <devIcon :size="'100px'" :tags="art.tag"></devIcon>
      </div>
    </div>
  </div>
</template>

<script>
    import { articleList } from '@/api/apis/auth'
    import devIcon from "../devIcon/devIcon"
    export default {
        name: "articles",
        data () {
            return {
                articles: []
            }
        },
        methods : {
            toView (articleId) {
              this.$router.push('/articleInfoWeb?articleId='+articleId)
            }
        },
        mounted () {
            articleList().then(resp => {
                this.articles = resp.data
            })
        },
        components:{
          devIcon
        }
    }
</script>

<style scoped lang='scss'>

    .articles-root {
        width: 100%;
        padding: 30px 30px;
        overflow-y: scroll;

        .web-article {
            width: 50%;
            height: 300px;
            margin-top: 30px;
            padding: 0;
            border-radius: 10px;
            border: 1px solid #e3e3e3;
            // overflow: hidden;
            cursor: pointer;
            transition: box-shadow 0.5s;

            .article-info {
                width: 70%;
                height: 100%;

                .article-title {
                    width: 100%;
                    padding: 5px 30px;
                    border-bottom: 1px solid #e3e3e3;

                    .article-title-name {
                        font-size: 25px;
                        width: 100%;
                        color: #c19930;
                        margin-bottom: 3px;
                    }
                    .article-title-statis {
                        span {
                          font-size: 10px;
                          color: #b1b4ba;
                        }
                        width: 100%;
                    }
                }
            }

            .article-right {
                width: 30%;
                height: 100%;
                border-left: 1px solid #f2f2f2;
            }


            &:hover {
                box-shadow: 0 2px 14px 1px rgba(0,0,0,.3);
            }

        }
    }

</style>
